<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="../bootstrap/js/jquery-3.5.1.js"></script>
    <script src="../js/lib/jquery-1.10.2.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container-fluid" style="margin-top: 20px">
    <form id="form-like">
    <div class="row">
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input name="name" class="form-control" id="" placeholder="姓名">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label class="col-sm-3 control-label">电话</label>
                <div class="col-sm-9">
                    <input name="tel" class="form-control" id="" placeholder="电话">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-4 control-label">投保意向</label>
                <div class="col-sm-8">
                    <select name="intention" class="form-control">
                        <option value="">===请选择===</option>
                        <option value="无">无</option>
                        <option value="健康保险">健康保险</option>
                        <option value="儿童保险">儿童保险</option>
                        <option value="意外保险">意外保险</option>
                        <option value="年金保险">年金保险</option>
                        <option value="父母保险">父母保险</option>
                        <option value="高端医疗险">高端医疗险</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-3 col-md-offset-9" style="text-align: right">
            <input id="btn-like" type="button" class="btn btn-warning" value="查询"/>
        </div>
    </div>
    </form>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-12">
            <table id="tab-show" class="table table-striped" style="width: 90%;text-align: center" align="center">
                <tr style="font-weight: 700">
                    <td>姓名</td>
                    <td>性别</td>
                    <td>手机号</td>
                    <td>公司</td>
                    <td>投保意向</td>
                    <td>操作</td>
                </tr>
<!--                <tr>-->
<!--                    <td>张三</td>-->
<!--                    <td>男</td>-->
<!--                    <td>13200000000</td>-->
<!--                    <td>清华大学</td>-->
<!--                    <td>无</td>-->
<!--                    <td>-->
<!--                        <button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-primary">查看跟踪记录</button>-->
<!--                        <button data-toggle="modal" data-target="#myModal2" type="button" class="btn btn-primary">新增跟踪记录</button>-->
<!--                    </td>-->
<!--                </tr>-->
            </table>
        </div>
    </div>

    <!--分页 begin-->
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="Page navigation" style="float: right">
                <ul class="pagination">
<!--                    <li><a href="#">1</a></li>-->
                </ul>
            </nav>

        </div>
    </div>
    <!--分页 end-->






    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">张三跟踪记录</h4>
                </div>
                <div class="modal-body">
                    <table id="follow-list" style="text-align: center" class="table ">
                        <tr>
                            <td>详情</td>
                            <td style="width:20%">时间</td>
                        </tr>
<!--                        <tr>-->
<!--                            <td>考虑考虑</td>-->
<!--                            <td>2020-07-01</td>-->
<!--                        </tr>-->

                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增跟踪记录 begin -->
    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="">新增跟踪记录</h4>
                </div>

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">详情</div>
                            <div class="col-sm-9">
                                <textarea id="text-follow" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-add-text" type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增跟踪记录 end -->

</div>

<script type="text/javascript">

    let cid;
    let content;
    $(document).ready(

        count(),
        show(1)
    );




    function show(index) {
        $.ajax({
            url:"/customer/showAll?index="+index,
            type:"get",
            dataType:"json",
            success:function (result) {
                if(result.state==2000){
                    for(let list of result.data ){
                        let sex;
                        if(list.sex==0){
                            sex="女";
                        }else {
                            sex="男";
                        }
                        $("#tab-show").append("<tr cid='"+list.id+"'>" +
                            "<td>"+list.name+"</td>" +
                            "<td>"+sex+"</td>" +
                            "<td>"+list.tel+"</td>" +
                            "<td>"+list.company+"</td>" +
                            "<td>"+list.intention+"</td>" +
                            "<td>" +
                            "<button data-toggle='modal' c_name='"+list.name+"' data-target='#myModal' type='button' class='btn btn-primary btn-follow '>查看跟踪记录</button>" +
                            "<button data-toggle='modal' data-target='#myModal2' type='button' class='btn btn-primary btn-add'>新增跟踪记录</button>" +
                            "</td>" +
                            "</tr>")
                    }
                //查询跟踪记录
                    $(".btn-follow").click(function () {
                         cid=$(this).parents("tr").attr("cid")
                        $("#follow-list").children().remove()
                        $("#myModalLabel").text($(this).attr("c_name")+"跟踪记录")
                        $.ajax({
                            url:"/follow/list?cid="+cid,
                            type:"get",
                            dataType:"json",
                            success:function (result) {
                                if(result.state==2000){
                                    for(let fl of result.data){
                                        let time=renderTime(fl.time)
                                        $("#follow-list").append("<tr>\n" +
                                            "<td>"+fl.content+"</td>" +
                                            "<td style='width:20%'>"+time+"</td>" +
                                            "</tr>")
                                    }

                                }
                            }
                        })
                    })
                //获取当前窗口
                    $(".btn-add").click(function () {
                         cid=$(this).parents("tr").attr("cid")

                    })
                //提交跟踪记录
                    $("#btn-add-text").click(function () {
                        content=$("#text-follow").val();
                        $.ajax({
                            url:"/follow/add?content="+content+"&cid="+cid,
                            type:"post",
                            dataType:"json",
                            success:function (result) {
                                if(result.state==2000){
                                    alert("添加成功")
                                    location.reload(false)
                                }
                            }
                        })

                    })

                }
            }
        })
    }

    $("#btn-like").click(function () {
        $("#tab-show").children().remove()
        $("#tab-show").append("<tr style=\"font-weight: 700\">\n" +
            "                    <td>姓名</td>\n" +
            "                    <td>性别</td>\n" +
            "                    <td>手机号</td>\n" +
            "                    <td>公司</td>\n" +
            "                    <td>投保意向</td>\n" +
            "                    <td>操作</td>\n" +
            "                </tr>")

        $.ajax({
            url:"/customer/like",
            data:$("#form-like").serialize(),
            type:"post",
            dataType: "json",
            success:function (result) {
                if(result.state==2000){
                //循环遍历该uid所有的
                    for(let list of result.data ){
                        let sex;
                        if(list.sex==0){
                            sex="女";
                        }else {
                            sex="男";
                        }

                        $("#tab-show").append("<tr cid='"+list.id+"'>" +
                            "<td>"+list.name+"</td>" +
                            "<td>"+sex+"</td>" +
                            "<td>"+list.tel+"</td>" +
                            "<td>"+list.company+"</td>" +
                            "<td>"+list.intention+"</td>" +
                            "<td>" +
                            "<button data-toggle='modal' c_name='"+list.name+"' data-target='#myModal' type='button' class='btn btn-primary btn-follow '>查看跟踪记录</button>" +
                            "<button data-toggle='modal' data-target='#myModal2' type='button' class='btn btn-primary btn-add'>新增跟踪记录</button>" +
                            "</td>" +
                            "</tr>")
                    }

                    //查询跟踪记录
                    $(".btn-follow").click(function () {
                        let cid=$(this).parents("tr").attr("cid")
                        $("#follow-list").children().remove()
                        $("#myModalLabel").text($(this).attr("c_name")+"跟踪记录")
                        $.ajax({
                            url:"/follow/list?cid="+cid,
                            type:"get",
                            dataType:"json",
                            success:function (result) {
                                if(result.state==2000){
                                    for(let fl of result.data){
                                        $("#follow-list").append("<tr>\n" +
                                            "<td>"+fl.content+"</td>" +
                                            "<td style='width:20%'>"+fl.time+"</td>" +
                                            "</tr>")
                                    }

                                }
                            }
                        })
                    })
                    //获取当前窗口
                    $(".btn-add").click(function () {
                        cid=$(this).parents("tr").attr("cid")

                    })

                }
            }
        })
    })

    function count (){
        $.ajax({
            url:"/customer/count",
            type:"get",
            dataType:"json",
            success:function (result) {

                if(result.state==2000){
                    let num=result.data/5;
                    if(num>parseInt(num)){
                        num++;
                    }
                    for(let i=1;i<=num;i++){
                        $(".pagination").append(" <li><a >"+i+"</a></li>");
                    }

                }else {
                    alert("出现错误")
                }
                $(".pagination").children().click(function () {
                    console.log("点击获取坐标")
                    let index=$(this).text();
                    alert("index="+index)
                    $("#tab-show").children().remove()
                    $("#tab-show").append("<tr style='font-weight: 700'>" +
                        "<td>姓名</td>" +
                        "<td>性别</td>" +
                        "<td>手机号</td>" +
                        "<td>公司</td>" +
                        "<td>投保意向</td>" +
                        "<td>操作</td>" +
                        "</tr>")
                    show(index)
                })
            }
        });
    }
    function renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
</script>

</body>
</html>